<template>
  <div class="creation-manager">
    <!-- 顶部搜索与创建 -->
    <div class="top-bar" ref="topBox">
      <div class="top-left">
        <div class="title">作品管理</div>
        <div class="dz">作品管理</div>
      </div>
      <div class="top-right">
        <el-input
          v-model="searchKeyword"
          placeholder="输入关键词搜索"
          @keyup.enter="handleSearch"
          class="search-input"
        >
          <el-button
            class="search-btn"
            slot="append"
            type="primary"
            @click="handleSearch"
            >搜索</el-button
          >
        </el-input>
        <el-button
          class="cj-btn"
          type="primary"
          icon="el-icon-plus"
          @click="showDialog = true"
          >创建作品</el-button
        >
      </div>
    </div>

    <!-- 分类标签栏 -->
    <div class="neiRongBox" :style="'height:' + tableHeight + 'px'">
      <div class="tabs">
        <el-tabs v-model="currentTab" @tab-click="handleTabChange">
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.name"
            :label="tab.label + '(' + navList[tab.name] + ')'"
            :name="tab.name"
          ></el-tab-pane>
        </el-tabs>

        <el-popover
          placement="bottom"
          width="138"
          popper-class="zpBox2"
          v-model="showPx"
          trigger="manual"
        >
          <div
            class="pxitem"
            @click="
              pagination.sort = 'created_at';
              fetchCreations();
              showPx = false;
            "
          >
            按修改时间排序
          </div>
          <div
            class="pxitem"
            @click="
              pagination.sort = 'updated_at';
              fetchCreations();
              showPx = false;
            "
          >
            按创建时间排序
          </div>

          <div
            :class="showPx ? 'px active' : 'px'"
            slot="reference"
            @click="showPx = !showPx"
          >
            {{
              pagination.sort == "created_at"
                ? "按创建时间排序"
                : "按修改时间排序"
            }}<i class="el-icon-sort"></i>
          </div>
        </el-popover>
      </div>

      <!-- 作品列表 -->
      <div class="creation-list" v-if="creations.length > 0">
        <div
          class="creation-card"
          v-for="item in creations"
          :key="item.creation_id"
        >
          <img
            v-if="item.cover_image"
            :src="
              'http://116.205.104.204:8080/api/v1/creations/' + item.cover_image
            "
            alt="封面"
            class="cover-image"
            @click="goCreate(item)"
          />
          <img
            v-else
            src="@/assets/images/noSj.png"
            alt="封面"
            class="cover-image"
            @click="goCreate(item)"
          />

          <el-popover
            placement="bottom-start"
            width="112"
            popper-class="zpBox"
            trigger="click"
          >
            <div class="pxitem" @click="edit(item)">编辑书籍</div>
            <!-- <div class="pxitem" @click="collaborateAdmin(item)">协作管理</div> -->
            <div class="pxitem" @click="shareAdmin(item)">分享管理</div>
            <!-- <div class="pxitem">转移作品</div> -->
            <div class="pxitem" @click="removeZP(item)">删除作品</div>
            <el-button
              slot="reference"
              icon="el-icon-more"
              class="moreCz"
            ></el-button>
          </el-popover>

          <div class="gxsj">{{ "更新于" + initTime(item.updated_at) }}</div>
          <div class="creation-info">
            <div class="name">{{ item.title }}</div>
            <div class="wz">{{ item.words + "字" }}</div>
          </div>
        </div>
      </div>

      <!-- 空数据提示 -->
      <div class="empty-data" v-else>
        <img src="@/assets/images/noSj.png" alt="" />
        <div v-if="toltal">暂无数据</div>
        <div v-else>
          您还没有作品，点击
          <span @click="openCreateDialog" class="create-link">创建作品</span>
          开始创作吧！
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="float: right"
      prev-text="上一页"
      next-text="下一页"
      v-if="creations.length > 0"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="fetchCreations"
    ></el-pagination>

    <!-- 创建作品弹窗 -->
    <CreateWorkDialog
      ref="createBox"
      @changeDldh="changeDldh"
      :visible.sync="showDialog"
      @submit="handleSearch"
    />

    <!-- 删除作品弹窗 -->
    <RemoveWorkDialog
      v-if="showRemoveDialog"
      :visible.sync="showRemoveDialog"
      :userPhone="userPhone"
      :deleteId="removeID"
      @submit="handleSearch"
    />
    <Conversation ref="dldh" />
  </div>
</template>

<script>
import CreateWorkDialog from "./CreateWorkDialog.vue";
import RemoveWorkDialog from "./RemoveWorkDialog.vue";
import { Message } from "element-ui";
import {
  getCreationsList,
  getCreationDetail,
  searchCreations,
} from "@/api/work";
import Conversation from "@/components/Conversation/index.vue";
import { getUser } from "@/api/system/user";
import RightTools from "@/views/createPage/components/RightTools.vue";
export default {
  components: { RightTools, Conversation, CreateWorkDialog, RemoveWorkDialog },
  data() {
    return {
      userPhone: "",
      removeID: "",
      detailInfo: {},
      navList: { 1: 0, 2: 0, 3: 0, all: 0, collab: 0 },
      showRemoveDialog: false,
      tableHeight: "200px",
      showPx: false,
      showDialog: false,
      searchKeyword: "",
      currentTab: "all",
      tabs: [
        { label: "所有作品", name: "all", val: "" },
        { label: "未开始", name: "1", val: 1 },
        { label: "创作中", name: "2", val: 2 },
        { label: "已完结", name: "3", val: 3 },
        // { label: '协同',name:'collab',val:'' },
      ],
      creations: [],
      pagination: {
        status: "",
        sort: "updated_at",
        page: 1,
        limit: 10,
      },
      total: 0,
      createForm: {
        title: "",
        classify_id: null,
        cover_image: "",
      },
      classifyList: [],
    };
  },
  computed: {
    toltal() {
      const total = Object.values(this.navList).reduce(
        (acc, val) => acc + val,
        0
      );
      return total;
    },
  },
  created() {
    this.fetchCreations();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.$nextTick(() => {
      this.handleResize();
    });
    window.addEventListener("resize", this.handleResize);
  },
  methods: {
    changeDldh(data) {
      if (data.type == "close") {
        this.$refs.dldh.showLogo = false;
      }
      if (data.type == "show") {
        this.$refs.dldh.showLogo = true;
      }
      if (data.type == "openNew") {
        this.$refs.dldh.showLogo = true;
        this.$refs.dldh.openNew(data.id, data.show_prompt);
      }

      console.log(data);
    },
    goCreate(item) {
      console.log(item);
      this.$router.push("/work/createPage/index/" + item.id);
    },
    handleResize() {
      this.tableHeight =
        window.innerHeight - 120 - this.$refs.topBox.clientHeight;
    },
    collaborateAdmin(item) {
      console.log(item);
      this.$router.push("/work/collaborate/index/" + item.id);
    },
    shareAdmin(item) {
      console.log(item);
      this.$router.push("/work/share/index/" + item.id);
    },
    removeZP(item) {
      this.removeID = item.id;
      this.showRemoveDialog = true;
    },
    initTime(time) {
      return time.split("T")[0];
    },
    edit(item) {
      getCreationDetail({ creation_id: Number(item.id) }).then((res) => {
        console.log(res);
        this.showDialog = true;
        this.$refs.createBox.init(res);
      });
    },
    // 获取作品列表
    fetchCreations(page = 1) {
      this.pagination.page = page;
      let selectObj = JSON.parse(JSON.stringify(this.pagination));
      if (selectObj.status == "") {
        delete selectObj.status;
      }
      getCreationsList(selectObj).then((res) => {
        console.log(res);
        this.creations = res.creations;
        this.navList = res.stats;
        // this.pagination.total = res.data.stats.total;
        // console.log(total);
      });
    },
    // 获取搜索数据
    getSearchData() {
      searchCreations({
        keyword: this.searchKeyword,
        limit: 100,
        page: 1,
      }).then((res) => {
        this.creations = res.creations;
      });
    },

    // 搜索
    handleSearch() {
      if (this.searchKeyword) {
        this.getSearchData();
      } else {
        this.fetchCreations();
      }
    },
    // 切换标签
    handleTabChange() {
      this.pagination.status =
        this.currentTab == "all" ? "" : Number(this.currentTab);
      this.fetchCreations();
    },
    // 打开创建弹窗
    openCreateDialog() {
      this.showDialog = true;
    },
    // 上传封面图片
    handleUploadSuccess(response) {
      this.createForm.cover_image = response.data.path;
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith("image/");
      if (!isImage) Message.error("只支持上传图片类型文件");
      return isImage;
    },
    //删除作品
    removeSubmit() {},
    // 创建作品
    handleSubmit() {
      this.$axios
        .post("/api/v1/creations/create", this.createForm)
        .then(() => {
          Message.success("作品创建成功");
          this.showDialog = false;
          this.fetchCreations();
        })
        .catch(() => Message.error("创建失败"));
    },
  },
};
</script>

<style scoped>
.creation-manager {
  padding: 24px 22px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.top-left .title {
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.top-left .dz {
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.search-input {
  width: 400px;
}

.tabs {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.creation-list {
  overflow: auto;
}

.creation-list .creation-card {
  width: 185px;
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px;
  margin-right: 24px;
  position: relative;
  float: left;
}

.cover-image {
  width: 185px;
  height: 247px;
  object-fit: cover;
  border-radius: 4px 4px 4px 4px;
}

.gxsj {
  font-size: 12px;
  color: #ffffff;
  line-height: 30px;
  position: absolute;
  top: 224px;
  width: 100%;
  text-align: center;
  left: 0;
  height: 30px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.creation-info {
  margin-top: 8px;
}

.creation-info .name {
  line-height: 22px;
  font-weight: 400;
  font-size: 16px;
  color: #00011b;
  margin-bottom: 4px;
}

.creation-info .wz {
  font-size: 12px;
  color: rgba(0, 1, 27, 0.5);
  line-height: 14px;
}

.empty-data {
  text-align: center;
  color: rgba(0, 1, 27, 0.5);
  padding-top: 360px;
  font-size: 14px;
}

.empty-data img {
  width: 140px;
  height: 120px;
}

.create-link {
  color: #165deb;
  cursor: pointer;
}

.search-input ::v-deep .el-input__inner {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-input ::v-deep .el-button--medium {
  border-radius: 8px;
  background: #165deb;
  color: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-btn,
.cj-btn {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  padding: 0 25px;
  font-weight: bold;
  border-radius: 8px;
}

.cj-btn {
  margin-left: 25px;
}

::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

::v-deep .el-tabs__active-bar {
  display: none;
}

::v-deep .el-tabs__item {
  font-size: 16px;
  padding: 0 16px;
  font-weight: normal;
  height: 22px;
  line-height: 22px;
}

::v-deep .el-tabs__item.is-active {
  font-weight: bold;
}

.px {
  float: right;
  font-size: 14px;
  color: #00011b;
  line-height: 20px;
}

.px i {
  margin-left: 2px;
}

.px.active {
  color: rgba(22, 93, 235, 1);
}

.pxitem {
  text-align: center;
  color: #00011b;

  font-size: 14px;
  line-height: 20px;
  margin: 20px 0;
}

.pxitem:hover {
  color: #165deb;
  cursor: pointer;
}

.moreCz {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(0, 1, 27, 0.6);
  color: #fff;
  height: 24px;
  width: 24px;
  padding: 0;
}
</style>
<style>
.zpBox2 {
  min-width: 50px !important;
  padding: 0;
}

.zpBox {
  min-width: 50px !important;
  padding: 0;
}

.zpBox .pxitem {
  font-size: 16px;
  color: #00011b;
}
</style>
